﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<title>sample1</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script type="text/javascript">
$(function(){
	$("span.tooltip").css({
		opacity:"0.9",
		position:"absolute",
		display:"none"
	});
	$("a").mouseover(function(){
		$("span.tooltip").fadeIn();
	}).mouseout(function(){
		$("span.tooltip").fadeOut();
	}).mousemove(function(e){
		$("span.tooltip").css({
			"top":e.pageY+10+"px",
			"left":e.pageX+10+"px"
		});
	});
});
		</script>
		<style type="text/css">
body{
	background:#777;
	color:white;
}
a{
	color:#00CCFF;
}
h1{
	width:80%;
	margin:10px auto;
}
p{
	margin:10px 10%;
}
span.tooltip{
	line-height:1.5;
	color:white;
	width:200px;
	background:#FF9900;
	border:2px solid white;
	padding:1em;
	font-size:small;
}
		</style>
	</head>
	<body>
		<h1>tooltip sample</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed quam ac risus auctor pulvinar. Nullam tellus lorem, volutpat sit amet eleifend quis, semper pellentesque nunc. Aliquam eu tortor nec nisl suscipit vehicula et eu sapien. Maecenas at pretium diam. Proin non luctus diam. Pellentesque risus nisi, scelerisque eu ultricies quis, <a href="http://ascii.jp/elem/000/000/438/438206/">tooltip sample</a> <span class="tooltip">이것은ASCII.jp<br /><strong>Web제작현장에서 사용한 jQuery<br />UI디자인 입문</strong><br />의 샘플 프로그램입니다.</span>luctus rhoncus dui. Proin pharetra aliquet justo, vel scelerisque lorem scelerisque eget. Praesent pharetra magna sit amet diam sagittis ac dictum nunc imperdiet. Pellentesque posuere vulputate fermentum. Vivamus fringilla commodo elit, in ornare libero imperdiet sed.</p>

		<p>Proin adipiscing faucibus felis eget auctor. Duis sed ante turpis. Cras sit amet euismod est. Vivamus tempus nibh sed odio pulvinar nec varius leo dignissim. Morbi nunc dui, rutrum vitae porttitor quis, semper in augue. Maecenas feugiat neque sit amet nisl euismod in imperdiet lorem iaculis. Suspendisse a convallis augue. Fusce faucibus sollicitudin dui, lobortis semper lacus elementum et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ullamcorper ipsum sit amet libero aliquet feugiat. Nulla facilisi. Cras tincidunt convallis felis, sed vulputate lorem blandit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque tortor leo, dapibus et vulputate in, laoreet sit amet odio. Nulla facilisi. Maecenas sit amet purus eu magna pellentesque sodales. In in velit sit amet sapien pharetra placerat non quis ante. Curabitur nisl tellus, aliquet quis facilisis non, congue eu lectus. Aenean lacinia, magna ut mattis aliquet, nisl augue posuere massa, ac bibendum nisi quam eu est.</p>

		<p>Morbi faucibus condimentum dolor sed tristique. Suspendisse vel diam at purus sagittis pretium. Nulla dapibus arcu metus. Sed vulputate adipiscing dapibus. Nullam interdum turpis vitae massa venenatis pulvinar. Nulla commodo convallis augue ullamcorper facilisis. Nullam viverra sollicitudin mauris eget euismod. Suspendisse nec orci felis, non viverra quam. Nunc blandit neque arcu. Aenean dignissim auctor tortor, non hendrerit nisi semper sit amet. Donec vel quam sed arcu dignissim tempus. Sed lacus erat, cursus dapibus porta non, suscipit in odio. Morbi consequat condimentum lorem, dignissim interdum dui condimentum ac. Integer eros diam, lobortis in molestie vitae, ullamcorper eget enim. Pellentesque vel velit odio, non tincidunt turpis. Ut suscipit convallis odio, rhoncus vehicula dolor dignissim in. Phasellus consequat, turpis ut imperdiet tempus, turpis neque bibendum risus, non tempor nisl eros a risus. Aenean mi libero, placerat sed suscipit ut, tincidunt a mi.</p>

	</body>
</html>